<template>
    <view class="wrapper">

        <view class="activityItem">
            <image :src="activityObj.cover" class="top" mode=""></image>

            <view class="bottom">
                <view class="left">
                    <view class="title text-1line-ellipsis">
                        {{activityObj.name}}
                    </view>
                </view>
                <view class="right">
                    <view v-if="activityObj.activityStatus==1||activityObj.activityStatus==2" class="status statusEn">
                        {{activityObj.activityStatusName}}
                    </view>
                    <view v-else class="status statusDis">
                        {{activityObj.activityStatusName}}
                    </view>
                </view>
            </view>
        </view>


        <view class="award" v-if="awardList.length>0">
            <view class="header">
                奖品列表
            </view>
            <view v-for="(item,index) in awardList" class="item" :key="item.id">
                <image :src="item.cover" class="left" mode=""></image>
                <view class="middle">
                    {{item.grade}}
                </view>
                <view class="middle text-2line-ellipsis">
                    {{item.name}}
                </view>
            </view>
        </view>



        <view v-if="activityObj.startTime&&activityObj.startTime.length>0" class="ruler">         
            <text class="title">活动时间：</text>         
            <view class="text" >
                {{activityObj.startTime}} 至 {{activityObj.endTime}}
            </view>
        
            <text class="title">活动说明：</text>
            <view class="text">
                <u-parse :html="activityObj.intro"></u-parse>
            </view>
        </view>


        <share-button v-if="activityObj.startTime&&activityObj.startTime.length>0"
			@onShare="onShare"
        ></share-button>
    </view>
</template>

<script>
    const api = require('@/static/js/api.js')
    const utils = require("@/static/js/utils.js")
 
    import {
        mapState,
        mapMutations,
        mapActions,
        mapGetters
    } from 'vuex';

    export default {
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        data() {

            return {

                rulerNode: "",
                activityDuty: "",
                awardList: [],

                activityObj: {
                    name: "",
                    activityStatusName: "",
                    startTime: "",
                    endTime: "",
                    intro: "",
                },
                activityId: ""
            }
        },
        components: {
            
        },
        onLoad(options) {
            if (options.id) {
                this.activityId = options.id
                this.getActivityDetail(options.id)
            }
        },

        methods: {

            getActivityDetail(id) {
                let that = this
                api.getActivityDetail({
                    param: {
                        id: id,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {

                        res.data.activityInfo.intro = res.data.activityInfo.intro || "";
                        res.data.activityInfo.startTime = utils.formatTime(res.data.activityInfo.startTime,
                            'yyyy-MM-dd')
                        res.data.activityInfo.endTime = utils.formatTime(res.data.activityInfo.endTime,
                            'yyyy-MM-dd')

                        that.activityObj = res.data.activityInfo;

                        var pushlist = res.data.activityInfo.presents
                        for (var i = 0; i < pushlist.length; i++) {
                            if (pushlist[i].awardType != 0) {
                                that.awardList.push(pushlist[i])
                            }
                        }
						that.shareTitleMixins = that.activityObj.shareInfo;
						that.shareImageMixins = that.activityObj.shareImage; 
                    }
                })
            },
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #F3F3F3;
    }

    .wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .activityItem {
        width: 714rpx;
        // height: ;
        background-color: #ffffff;
        position: relative;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        overflow: hidden;
        margin-top: 32rpx;

        .top {
            width: 100%;
            height: 240rpx;
        }

        .bottom {
            width: 100%;
            height: 150rpx;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                margin-left: 30rpx;

                .title {
                    width: 400rpx;
                    font-size: 32rpx;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 40rpx;
                    letter-spacing: 0rpx;
                    color: #1E1E1E;
                }

                .introduce {
                    margin-top: 20rpx;
                    width: 400rpx;
                    font-size: 24rpx;
                    line-height: 33rpx;
                    color: #999999;
                }

                .timeOut {
                    max-width: 400rpx;
                    margin-top: 26rpx;
                    height: 24rpx;
                    font-family: MicrosoftYaHei;
                    font-size: 24rpx;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 24rpx;
                    letter-spacing: 0rpx;
                    color: #fe8140;
                }
            }

            .right {
                margin-right: 30rpx;
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                .status {
                    width: 180rpx;
                    height: 64rpx;
                    border-radius: 32rpx;
                    line-height: 64rpx;
                    text-align: center;
                    padding: 0 30rpx;
                    font-size: 28rpx;
                }

                .statusEn {
                    background-color: #F6784C;
                    color: #ffffff;
                }

                .statusDis {
                    background-color: #b2b2b2;
                    color: #e8e8e8;
                }
            }
        }
    }





    .ruler {
        width: 714rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
        border-radius: 31rpx;
        padding: 30rpx;
        margin-top: 30rpx;
        margin-bottom: 200rpx;
        .title{
            font-size: 30rpx;
            color: #000000;
        }
        .text{
            margin-left: 30rpx;
            width: 600rpx;
            margin-top: 20rpx;
            margin-bottom: 30rpx;
            font-size: 24rpx;
            color: #333333;
            line-height: 33rpx;
        }
    }
    

    .award {
        width: 714rpx;
        padding: 30rpx 0;
        background: linear-gradient(180deg, #FE551E 0%, #FF8613 100%, #FFE38C 100%);
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        margin-top: 30rpx;

        .header {
            color: #FFFFFF;
            font-size: 32rpx;
            margin-left: 30rpx;
        }

        .item {
            width: 690rpx;
            height: 128rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            margin-left: 12rpx;
            margin-top: 24rpx;

            .left {
                width: 88rpx;
                height: 88rpx;
                margin-left: 20rpx;
            }

            .middle {
                color: #333333;
                font-size: 28rpx;
                max-width: 300rpx;
                margin-left: 30rpx;
            }
        }
    }


    .bottomContainer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 122rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #F3F3F3 1px solid;

        .container {
            width: 600rpx;
            height: 74rpx;
            background: #F6784C;
            border-radius: 37rpx;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;

            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 15rpx;
            }
        }
    }
</style>
